<template>
  <div>
    <h2 class="big-title">
      领料退回列表
      <div>
        <el-button type="primary" icon="el-icon-back" @click="$router.back(-1)">返回</el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="save">保存</el-button>
      </div>
    </h2>
    <br>
    <br>
    <el-input placeholder="请输入内容" v-model="seachText" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
    </el-input>
    <br>
    <br>
    <hr>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width:100%"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.orderItems"
            style="width:100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="material.name" label="物料名称"></el-table-column>
            <el-table-column prop="material.code" label="物料编码"></el-table-column>
            <el-table-column prop="quantity" label="物料数量">
              <template slot-scope="scope">
                <el-input-number
                  v-model="moudelApplicat[scope.row.orderNo+','+scope.row.id+',quantity']"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="单号" sortable></el-table-column>
      <el-table-column prop="factoryName" label="收货工厂" sortable></el-table-column>
      <el-table-column prop="orderClass" label="单据类型" sortable>
        <template slot-scope="scope">
          <span>{{setOrderType(scope.row.orderType||scope.row.orderClass)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="totalNumber"
      @current-change="currentChange"
    ></el-pagination>
    <!-- 分割线 ---------------------->
  </div>
</template>

<script>
import { getReturnListOrder } from '@/api/putInStorage';
import * as baseConfigFn from '@/util/fieldConfig.js';

export default {
  name: 'generalStockInOrderBack',
  components: {},
  data() {
    return {
      loading: true,
      moudelApplicat: {}, // 动态修改表格中的值,绑定
      selection: [], // 当前选中的行的值,做下过渡,监控着
      multipleSelection: [],
      itemTable: [], // 详情后的table
      formInline: {}, // 点击的当前行 所有数据
      outerTitle: '',
      seachText: '',
      tableData: [],
      totalNumber: 0,
    };
  },
  created() {
    console.log('createdcreatedcreated');
    this.ininTableData();
  },
  computed: {
    // ...mapState({ token: state => state.user.token }),
  },
  methods: {
    ...baseConfigFn, // 都需要用的 字段转换
    save() {
      console.log('保存', this.multipleSelection, this.moudelApplicat);
      if (!this.multipleSelection.length) {
        this.$message.info('没有修改的值');
      } else {
        this.multipleSelection.forEach(item => {
          const quantityName = `${item.orderNo},${item.id},quantity`;
          if (this.moudelApplicat[quantityName] === undefined) {
            console.log('mei');
          } else {
            console.log('dingyi');
          }
        });
      }
    },
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        row.orderItems.forEach(item => {
          const quantityName = `${item.orderNo},${item.id},quantity`;
          console.log(item, quantityName, 'item');
          if (!this.moudelApplicat[quantityName]) {
            this.$set(this.moudelApplicat, quantityName, item.quantity);
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.selection = val;
      console.log(val);
    },
    ininTableData(searchKey = '', page = 0, size = 10) {
      const data = {
        searchKey,
        page,
        size,
      };
      if (!searchKey.length) delete data.searchKey;
      getReturnListOrder(data).then(res => {
        this.tableData = res.data.content;
        this.totalNumber = res.data.totalElements * 1;
        this.loading = false;
      });
    },
    handleClick() {
      console.log('handleClick');
      this.loading = true;
      this.ininTableData(this.seachText);
      this.seachText = '';
    },
    currentChange(page) {
      this.ininTableData('', page - 1);
    },

    // eslint-disable-next-line consistent-return
    getStatus(status) {
      if (status === 1) {
        return '已审核';
      }
      if (status === 3) {
        return '待审核';
      }
    },
  },
  watch: {
    selection(newvalue, oldvalue) {
      if (newvalue.length) {
        // 选中的时候
        this.multipleSelection.push(JSON.parse(JSON.stringify(...newvalue)));
      } else {
        // 取消选中的时候
        oldvalue.forEach(item => {
          this.multipleSelection.forEach((value, index) => {
            if (item.id === value.id) this.multipleSelection.splice(index);
          });
        });
      }
      // console.log(this.multipleSelection, '当前选中的');
    },
  },
};
</script>
